<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
	<title>工具管理-代码生成-元数据规则</title>
	<link th:href="${ctx}+'lib/jquery-layout/jquery.layout-latest.css'" rel="stylesheet"/>
	<link th:href="${ctx}+'lib/jquery-ztree/3.5/css/metro/zTreeStyle.css'" rel="stylesheet"/>
</head>
<body class="gray-bg">
	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<div class="form-content">
					<form class="form-horizontal m" id="form-column-edit">
						<input type="hidden" id="columnId" name="columnId"/>
						<input type="hidden" id="ruleIndex" name="ruleIndex"/>
						<h4 class="form-header h4">基本信息</h4>
						<div class="form-group">
							<label class="col-sm-3 control-label">数据表名称：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="tableName" name="tableName" readonly="true"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">元数据名称：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="columnName" name="columnName" readonly="true"/>
							</div>
						</div>
						<h4 class="form-header h4" id="rule_line">验证规则<button type="button" class="btn btn-xs pull-right" onclick="addRule()"><i class="fa fa-plus-circle">添加</i></button></h4>
						<div id="insert-rule" class="mb40"></div>
					</form>
				</div>

				<div class="form-footer">
					<a class="btn btn-success" href="#" onclick="save()">保存</a>
				</div>
			</div>
		</div>
	</div>

	<div th:replace="/common/include :: footer"></div>
	<div th:replace="/common/include :: ztreeJs"></div>
	<div th:replace="/common/include :: jqueryLayoutJs"></div>

	<script th:inline="javascript">
        var columnId = [[${id}]];
        var prefix = ctx + 'api/system/generator';
        var layer_index = [[${layer_index}]];
        var layer_callback = [[${layer_callback}]];
        var ruleIndex = 0;

        var rules_data = {
			notEmpty: 'message:不能为空',
			stringLength: 'min:{0},max:{1},message:长度只能{0}-{1}个字符',
			stringCase: 'case:upper,message:只能包含大写字母',
			emailAddress: 'message:邮箱格式不正确',
			date: 'format: YYYY-MM-DD,message:日期格式不正确',
			digits: 'message:数字格式不正确',
			greaterThan: 'value:{0},message:最小值为{0}',
			lessThan: 'value:{0},message:最大值为{0}',
			identical: 'field:{0},message:与{0}内容不一致',
			choice: 'min:{0},max:{1},message:请选择{0}-{1}项',
			different: 'field:{0},message:与{0}内容相同',
			regexp: 'regexp:^[\\u4e00-\\u9fa5]+$,message:中文格式不正确',
			uri: 'message:网络地址格式不正确',
			remote: '该功能暂未实现'
		};

        $(function() {
            initColumnForm();
        });

        function initColumnForm() {
            $('#insert-rule').children().remove();
            $.form.reset('form-column-edit');
            ruleIndex = 0;

            // 表单赋值
            $.operate.get({
                url: prefix + '/loadRule/' + columnId,
                success: function(result) {
                    if (result.code === 200) {
                        $.form.load('form-column-edit', result.param);
                        // 添加规则
						var validates = result.param.validates;
                        $.each(validates, function(index, validate) {
                            addRule(validate);
                        });
                    } else {
						$.modal.toast.error(result.msg, result.param);
                    }
                },
                error: function(result) {
                    window.location.href = ctx + '500';
                }
            });
		}

		function addRule(validate) {
            ruleIndex++;
        	var validates = $('#select-validates').html();
        	var html = '<div id="validate-name-' + ruleIndex + '"> ' +
					'<div class="form-group">' +
					'<label class="col-sm-3 control-label">规则名称：</label>' +
					'<div class="col-sm-6">' +
					'<select style="width: 100%" class="form-control select2 select2-hidden-accessible" id="validate-name-select-' + ruleIndex + '" name="validateName' + ruleIndex + '" onchange="changeRule(this.value,' + ruleIndex + ')"></select>' +
					'</div>' +
					'<div class="col-sm-3 pr30">' +
					'<button type="button" class="btn btn-xs btn-danger pull-right"><i class="fa fa-remove" onclick="removeRule(' + ruleIndex + ')">删除</i></button>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'<div class="form-group" id="validate-rule-' + ruleIndex + '"> ' +
					'<label class="col-sm-3 control-label">规则配置：</label>' +
					'<div class="col-sm-8">' +
					'<textarea class="form-control" name="validateRule' + ruleIndex + '" autocomplete="off" maxlength="500" rows="2"></textarea>' +
                	'<span class="small info" id="validate-info-' + ruleIndex + '"></span>' +
					'</div>' +
					'</div>';
			$('#insert-rule').append(html);
			var selected;
			if (validate) {
                selected = validate.validateName;
                $('textarea[name="validateRule' + ruleIndex + '"]').val(validate.rules);
			}
			$.form.initSelect('validate-name-select-' + ruleIndex, ctx + 'api/system/dict/select?dictGroup=gen_column_validate&rand=' + new Date().getTime(), selected);
		}

		function removeRule(id) {
			$('#validate-name-' + id).remove();
            $('#validate-rule-' + id).remove();
		}

		function changeRule(key, index) {
			$('#validate-info-' + index).html('<i class="fa fa-info-circle">[' + rules_data[key] + ']</i>');
		}

		function save() {
            $('#ruleIndex').val(ruleIndex);
            // 加载参数数据
            var param = $.form.serialize('form-column-edit');
            $.operate.post({
                url: prefix + '/saveRule',
                data: param
            }, true, layer_index, layer_callback);
		}
	</script>
</body>
</html>
